<template>
  <div class="content">
    <el-card class="card list-warp small-padding-card">
      <div class="list-title">
        <span>现状调洪演算结果</span>
      </div>
      <el-table
        stripe
        class="ans-table"
        :data="floodResult"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <template>
          <span style="font-size: 20px">调洪失败，危险！</span>
        </template>
        <el-table-column prop="elevation" label="滩顶高程(m)"></el-table-column>
        <el-table-column
          prop="normalWaterLevel"
          label="正常运行水位(m)"
        ></el-table-column>
        <el-table-column
          prop="waterMark"
          label="最高洪水位(m)"
        ></el-table-column>
        <el-table-column
          prop="safeHeight"
          label="最小安全超高(m)"
        ></el-table-column>
        <el-table-column
          prop="floodHeight"
          label="调洪高度(m)"
        ></el-table-column>
        <el-table-column
          prop="capacity"
          label="调洪库容(万m³)"
        ></el-table-column>
        <el-table-column
          prop="beachLength"
          label="最小干滩长度(m)"
        ></el-table-column>
        <el-table-column
          prop="releaseFloodFlow"
          label="最大下泄流量(m³/s)"
        ></el-table-column>
        <el-table-column prop="theDate" label="演算时间"></el-table-column>
        <el-table-column label="操作" prop="show">
          <template> </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        size="mini"
        @click="calculation"
        class="handelClick"
        >演算</el-button
      >
    </el-card>
    <el-card class="new-box">
      <calculus :data="info" class="calculus"></calculus>
    </el-card>
    <el-card class="card chart-warp small-padding-card">
      <div style="height: 27.5vh; width: 99%" ref="chart" id="chart"></div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { getTailingPondList } from "../../../api/api";
import Calculus from "../../../components/Calculus";
// var headDatas = [];
// var box = document.getElementById("box");
// var table = document.createElement("table");
import { getFloodRoutingData } from "../../../api/api";
export default {
  //   inject: ['reload'],//注入依赖
  name: "FloodCalculusBody",
  components: {
    Calculus,
  },
  // props: {
  //   tailingPondId: 2,
  //   require: true,
  // },
  data() {
    return {
      taipondId: null,
      floodList: null,
      floodResult: [],
      show: true,
      info: {
        safeHeight: null,
        elevation: null,
        waterMark: null,
        capacity: null,
        beachLength: null,
        normalWaterLevel: null,
      },
    };
  },
  methods: {
    // 获取尾矿库id
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        this.taipondId = this.tailingList[0].id;
        console.log(this.taipondId);
        this.getFloodList();
        window.sessionStorage.setItem("tailingPondId", this.tailingList[0].id); //默认选中
      }
    },
    async getFloodList() {
      let floodProcess = [],
        floodDischarge = [],
        hour = [],
        maxfloodProcess = null,
        minfloodDischarge = null;
      axios({
        url: "/floodRouting/getFloodRoutingData/" + `${this.taipondId}`,
        method: "get",
      }).then((res) => {
        console.log(res);

        if (
          res.data.resultCode == "200" &&
          res.data.parameter.floodRoutingResult.safeHeight > 0.5
        ) {
          this.floodList = res.data.parameter.processList; //演算结果折线图
          this.floodResult.push(res.data.parameter.floodRoutingResult); //演算结果表
          this.floodResult.forEach((item) => {
            console.log(item);
            for (let key in item) {
              if (
                key !== "id" &&
                key !== "theDate" &&
                key !== "tailingPondId"
              ) {
                let x = String(item[key]).indexOf(".");

                let y = String(item[key]).length - x;
                if (y === 2) {
                  item[key] = String(item[key]) + 0;
                } else if (y > 2) {
                  item[key] = Number(item[key]).toFixed(2);
                }
                // console.log(key, x, item[key], y)
              }
            }
          });
          this.info.safeHeight =
            res.data.parameter.floodRoutingResult.safeHeight;
          this.info.elevation = res.data.parameter.floodRoutingResult.elevation;
          this.info.waterMark = res.data.parameter.floodRoutingResult.waterMark;
          this.info.capacity = res.data.parameter.floodRoutingResult.capacity;
          this.info.beachLength =
            res.data.parameter.floodRoutingResult.beachLength;
          this.info.normalWaterLevel =
            res.data.parameter.floodRoutingResult.normalWaterLevel;
          this.floodList.forEach((item) => {
            floodProcess.push(item.comeFloodFlow);
            floodDischarge.push(item.releaseFloodFlow);
            hour.push(item.hour);
          });
          maxfloodProcess = Math.max(...floodProcess);
          minfloodDischarge = Math.min(...floodDischarge);
          this.chartInit(
            floodProcess,
            floodDischarge,
            hour,
            maxfloodProcess,
            minfloodDischarge
          );
        } else if (res.data.parameter.floodRoutingResult.safeHeight < 0.5) {
          this.$alert("调洪失败，危险！", "警告", {
            confirmButtonText: "确定",
          });
        }
      });
    },
    //点击演算
    calculation() {
      axios({
        url: "/floodRouting/calculusFloodRouting/" + `${this.taipondId}`,
        method: "get",
      }).then((res) => {
        console.log(res);
        if (res.data.resultCode == "200") {
          console.log(res);
          setTimeout(function () {
            location.reload(false);
          }, 100);
          this.$message.success("演算成功");
        } else if (res.data.resultCode == "400") {
          this.$message.error("演算失败");
        }
      });
    },
    //调洪折线图
    chartInit(
      floodProcess,
      floodDischarge,
      hour,
      maxfloodProcess,
      minfloodDischarge
    ) {
      const chartBody = this.$echarts.init(document.getElementById("chart"));
      let option = {
        legend: {
          data: ["洪水过程线", "泄流过程线"],
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "时间(h)",
          data: hour,
          nameTextStyle: {
            lineHeight: 48,
            fontSize: 16,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: "流量m^3/s",
          nameLocation: "center",
          max: maxfloodProcess,
          min: minfloodDischarge,
          nameTextStyle: {
            lineHeight: 48,
            fontSize: 16,
          },
          splitLine: {
            show: false,
          },
        },
        grid: {
          x: 80,
          y: 50,
          x2: 80,
          y2: 25,
        },
        series: [
          {
            type: "line",
            name: "洪水过程线",
            encode: { x: 0, y: 1 },
            data: floodProcess,
            smooth: true,
          },
          {
            type: "line",
            name: "泄流过程线",
            encode: { x: 0, y: 1 },
            data: floodDischarge,
            smooth: true,
            lineStyle: {
              type: "dashed",
            },
          },
        ],
      };
      chartBody.setOption(option);
    },
  },
  created() {
    this.getTailingList();
  },
  mounted() {
    // console.log(document.getElementsByClassName('el-table__empty-block'));
    // let box = document.getElementsByClassName('el-table__empty-block')[0]
    // let btn = document.createElement('button')
    // btn.innerText = 'btn'
    // btn.setAttribute('css', 'float: right')
    // box.appendChild(btn)
  },
  // watch: {
  //   tailingPondId: {
  //     handler(newName, oldName) {
  //       this.taipondId = this.tailingPondId;
  //       // this.getWarningMannge()
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  //   // tailingPondId (val) {
  //   //   console.log(val);
  //   //   this.taipondId = val
  //   //   console.log(this.taipondId);
  //   // }
  // },
};
</script>

<style scoped>
.handelClick {
  float: right;
  position: absolute;
  margin-left: 92%;
  margin-top: -2.4%;
}
.content {
  height: 87vh;
  width: 100%;
  margin-right: 5px;
}

.card {
  width: 99%;
  display: block;
  margin-bottom: 0.5vh;
  margin: 0;
  padding: 0;
  /* overflow: auto; */
}
.img {
  position: relative;
  transform: translateY(-40px);
  width: auto;
  height: 48vh;
  display: block;
  margin: 0 auto;
}
.new-box {
  height: 410px;
  width: 99%;
}
.img-warp {
  height: 46%;
  width: 100%;
  /* background: pink; */
  margin: 0;
  padding: 0;
}
.list-warp {
  height: 18%;
}
.list-title {
  background-color: #f0f0f0;
  padding: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.list-title > span {
  margin: 5px 5px 5px 25px;
  font-size: 1.1em;
}
.chart-warp {
  height: 34%;
}
.ans-table {
  width: 100%;
  position: relative;
}
.el-table::before {
  z-index: inherit;
}
</style>

<style>
.small-padding-card > .el-card__body {
  padding: 8px;
}
</style>